<template>
  <div class="app-container">
    <div class="search-container">
      <!-- 车牌号码输入框 -->
      <span class="search-label">车牌号码：</span>
      <el-input
        clearable
        placeholder="请输入内容"
        class="search-main"
        v-model="params.carNumber"
      >
      </el-input>

      <!-- 车主姓名输入框 -->
      <span class="search-label">车主姓名：</span>
      <el-input
        clearable
        placeholder="请输入内容"
        class="search-main"
        v-model="params.personName"
      >
      </el-input>

      <!-- 状态选择框 -->
      <span class="search-label">状态：</span>
      <!-- 状态选择框 -->
      <span class="search-label">状态：</span>
      <el-select
        class="search-main"
        v-model="params.cardStatus"
        placeholder="请选择状态"
      >
        <el-option
          v-for="item in statusList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>

      <!-- 查询按钮 -->
      <el-button type="primary" class="search-btn" @click="fetchData">
        查询
      </el-button>
      <!-- 重置按钮 -->
      <el-button type="default" class="reset-btn" @click="resetForm"
        >重置</el-button
      >
    </div>
    <div>
      <el-button type="primary" @click="$router.push('/addMonthlyCard')"
        >新增月卡</el-button
      >
      <el-button type="primary" @click='delAllCard'>批量删除</el-button>
    </div>
    <el-table
      @selection-change="handleSelectionChange"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column align="center" label="ID" type="index">
      </el-table-column>
      <el-table-column label="personName" prop="personName"> </el-table-column>
      <el-table-column label="phoneNumber" align="center" prop="phoneNumber">
      </el-table-column>
      <el-table-column label="carNumber" align="center" prop="carNumber">
      </el-table-column>
      <el-table-column label="carBrand" align="center" prop="carBrand">
      </el-table-column>
      <el-table-column
        label="totalEffectiveDate"
        align="center"
        prop="totalEffectiveDate"
      >
      </el-table-column>
      <el-table-column
        label="状态"
        align="center"
        prop="cardStatus"
        :formatter="formatterStatus"
      >
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="操作"
        align="center"
        prop=""
      >
        <template #default="{ row }">
          <el-button type="text">续费</el-button>
          <el-button type="text">查看</el-button>
          <el-button type="text" @click="editCard(row.id)">编辑</el-button>
          <el-button type="text" @click="deleteCard(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="pagination-container">
      <div class="total-count">共{{ total }}条</div>
      <el-pagination
        class="custom-pagination"
        layout="prev, pager, next"
        :total="total"
        :page-size="params.pageSize"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getParkingCardListAPI,
  deleteCardAPI,
  deleteAllCardAPI,
} from "@/api/card";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    const params = {
      page: 1, // 默认第一页
      pageSize: 6, // 页面条数
      carNumber: "", // 车牌号
      personName: "", // 姓名
      cardStatus: null, // 状态码
    };
    return {
      list: [], //月卡列表
      params: { ...params }, //查询数据
      initialParams: { ...params }, // 重置
      listLoading: true,
      total: 0, //默认总页数
      statusList: [
        { id: 0, name: "有效" },
        { id: 1, name: "已过期" },
        { id: null, name: "全部" },
      ],
      // 批量删除id数组
      batchArray: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      // 调用接口初始化`
      // 赋值给data
      this.listLoading = true;
      getParkingCardListAPI(this.params).then((response) => {
        this.list = response.data.rows;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    // 查询
    fetchData() {
      this.params.page = 1; // 只重置页码为第一页
      this.getList();
    },
    // 映射关系
    formatterStatus(row, column) {
      const MAP = {
        0: "有效",
        1: "已过期",
      };
      return MAP[row.cardStatus];
    },
    // 点击每一页
    currentChange(page) {
      // 需改已知变量
      this.params.page = page;
      // 发请求重新获取list,再次调用getList就可以了
      this.getList();
    },
    // 查询
    resetForm() {
      this.params = { ...this.initialParams };
      this.getList();
    },
    //  编辑
    editCard(id) {
      this.$router.push({
        path: "/addMonthlyCard",
        query: {
          id,
        },
      });
    },
    // 删除
    deleteCard(id) {
      this.$confirm("此操作将删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await deleteCardAPI(id);
          // 更新
          this.getList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 获取条数，并转换成数组
    handleSelectionChange(value) {
      this.batchArray = value
    },
    // 批量删除调接口
    delAllCard() {
      deleteAllCardAPI(this.batchArray.map((item) => item.id));
      // 把数据映射成自己想要得数组
      this.getList()
      this.$message({
        type: "success",
        message: "批量删除成功!",
      });
    }
  },
};
</script>
<style scoped>
.search-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.search-label {
  font-weight: bold;
  margin-right: 10px;
}
.search-main {
  width: 200px;
}
.search-btn {
  margin-left: 10px;
}
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 在左右两端对齐 */
  padding: 20px;
}
.total-count {
  font-size: 14px;
}
</style>
